<template>

	<view class="box-01">
		<map id="map" class="map,map1" :show-location="true" :latitude="latitude" :longitude="longitude"
			:markers="state.markers" @markertap="handleMarkerTap"></map>

		<!-- 搜索 -->
		<view class="search">
			<uni-search-bar style="background-color: #ecebeb;" class="uni-mt-10" radius="56" placeholder="搜索地址"
				clearButton="auto" cancelButton="none" @confirm="search" />
		</view>

		<!-- 地址 -->
		<view class="box-02">
			<view>成华区双桥子福晟-乾隆天下</view>
			<view class="text-1">100m内|成华区双林路226-21号</view>
			<text class="text-2">✅</text>
		</view>
		
		<view class="box-02">
			<view>成华区双桥子福晟-乾隆天下</view>
			<view class="text-1">100m内|成华区双林路226-21号</view>
		</view>
		
		<view class="box-02">
			<view>成华区青龙巷36号泰业城中城1号楼2楼</view>
			<view class="text-1">100m内|成华区玉双路80号</view>
		</view>
		
		
		<view class="box-02">
			<view>马超东路266号新城市购物广场F4</view>
			<view class="text-1">100m内|马超东路266号</view>
		</view>
		
		<view class="box-02">
			<view>佳灵路7号红牌楼广场3号街区2楼</view>
			<view class="text-1">100m内|成华区3号街区2楼</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow
	} from "@dcloudio/uni-app";
	// 设置地址经纬度
	let latitude = ref(35.141);
	let longitude = ref(89.325);
	onReady(() => {
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
			}

		});
		state._mapContext = uni.createMapContext("map");
	});

	const state = reactive({
		markers: [{
				id: 1,
				title: "茶百道(成都锦华路万达广场店)",
				address: "四川省成都市锦江区锦华路一段68号成都锦华路万达广场F3",
				phone: "(028)61111012",
				latitude: 30.626515,
				longitude: 104.102515,
				width: parseInt(72) + 'rpx',
				height: parseInt(100) + 'rpx',
				isActive: false
			},

		]
	});

	//地图点击事件
	function handleMarkerTap(e) {

		state.markers.forEach(item => {
			item.isActive = false
			if (item.id == e.detail.markerId) {
				item.isActive = true
				cinemaName.value = item.title
			}
		})
	}
</script>

<style>
	.map1 {
		width: 100%;
		height: 800rpx;
	}

	.box-02 {
		border-bottom: 1rpx solid #dedada;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 36rpx 0;
	}

	.text-1 {
		font-size: 27rpx;
		color: #878787;
		margin-top: 11rpx;
	}

	.text-2 {
		position: absolute;
		position: absolute;
		right: 50rpx;
	}
</style>
